import React from 'react';
import '../../styles/home.less';
import '../../styles/common.less';
import {NavLink, Route, Link,Redirect,Switch} from 'react-router-dom';

// import AdminUser from './user';
import AdminJudge from './judge';
import AdminMain from './main';
import GoodsList from '../goods/list';
import GoodsDetail from '../goods/detail';
import Bundle from '../../utils/Bundle';
// 我的协议模块
import Agreement from './Agreement';

//引入我的订单模块
import MyOrder from './myOrder';
//引入已上课程模块
import MyClass from './myClass';

//引入课前预习游戏模块
import Game from '../components/coretask/Game';
//引入课后复习模块
import Review from '../components/coretask/Review';
// 教学内容模块
import TeachingContent from '../components/coretask/TeachingContent';
// 报告分析模块
import Analysis from '../components/coretask/Analysis';
// 引入清除cookie模块
import Cookies from 'js-cookie'
import http from '../../utils/http';
import Download from '../front/download';
import EventBus from '../../utils/eventBus';
import Mine from './mine'
import { BasePic } from '../../utils/basic';

//引入个人中心模块
const AdminIndex = (props) => (
	<Bundle load={() => import('./index')}>
			{(AdminIndex) => <AdminIndex {...props}/>}
	</Bundle>
);


// import Footer from '../components/Footer'
const tabs=[
  {
  id: '/admin/download/',
  name: '下载中心'
}]
// const tabs = [
//   {
//     id: '/admin/adminIndex',
//     name: '个人中心'
//   }, 
//   {
//     id: '/admin/adminMain',
//     name: '教学体系'
//   }, {
//     id: '/admin/adminJudge',
//     name: '师资团队'
//   }
// ]
  
class UserHome extends React.Component {
  state = {
    selected: '',
    uiShow:false,
    headShow:false,
    bellShow:false,
    gender:1
  }
  
  // 头部tab切换
  changeTab = (id) => {
    this.setState({selected: id})
  }
  // displayNone(e){
  //   e.stopPropagation();
  //   this.setState({
  //     uiShow:!this.state.uiShow
  //   })
  // }
  bellNone = () => {
    this.setState({
      bellShow:!this.state.bellShow
    })
  }
  logout = (e) => {
    e.stopPropagation();
    Cookies.remove('token', { path: '/' });
    this.props.history.push('/login/');
      // window.location.href ="web/login"
  }
  getImg(){
    http.get('/user/find/kidsDetailInfo')
        .then(data=> {
            if(data){
                this.setState({
                  gender:data.gender
                })
            }
          }, err => {
        })
        // 订阅事件
      EventBus.$on('changeImg', (gender) => {
        this.setState({
          gender:gender.gender 
        })
    })
  }
  // 初始化加载钩子
  componentDidMount() {
    // 获取并设置初始化路由
    let path = this.props.location.pathname
    path = path === '/'
      ? '/index/'
      : path
    this.setState({selected: path})
    this.getImg();
   
  }
  // bindShow = () => {
  //   this.setState({
  //     uiShow:false
  //   })
  // }
  // startShow = () =>{
  //   document.removeEventListener('onclick',this.bindShow)
  //   document.addEventListener('onclick',this.bindShow)
  // }
  // removeListen = () => {
  //   document.removeEventListener('mouseup',this.bindShow)
  // }
  render() {
    return (
      // 头部导航条的响应式
      <div className='homeInfo row' onClick={()=>{
        this.setState({
          uiShow: false
        })
      }}>
          <nav className="navbar navbar-default title-bar" style={{marginBottom:'0'}}>
                <div className="container-fluid title-bar">
                    <div className="navbar-header title-bar">
                      <Link className="navbar-brand title-logo" to="/admin/adminIndex/" style={{marginTop:"9px",padding:"0",marginLeft:0}}>
                        <img alt="logo" src={BasePic+'logo.png'} style={{width:"152px",height:"42px"}}/>
                      </Link>
                      <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" onClick={()=>{
                        this.setState({
                          headShow:!this.state.headShow
                        })
                      }}>
                        <span className="sr-only">Toggle navigation</span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                      </button>
                    </div>
                    <ul className="nav navbar-nav navbar-right">
                          {/* <li className="dropdown">
                            <img className="img-circle" src="https://fakeimg.pl/40x40/" alt='' style={{marginRight:"60px"}}/>                             
                          </li> */}
                          <li className="dropdown">
                            <a className="dropdown-toggle" style={{padding:0,width:'40px',height:'40px'}} data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" onClick={(e)=>{
                              e.stopPropagation();
                                this.setState({
                                  uiShow:!this.state.uiShow
                                })
                            }}> 
                            <img className="img-circle" src={this.state.gender&&Number(this.state.gender)===2?require('../../images/main/girl.png'):require('../../images/main/boy.png')} alt='' style={{marginRight:"30px",width:"100%",height:"100%"}}/> 
                              {/* <span className="caret"></span> */}
                            </a>
                              <ul className="dropdown-menu" style={{display:this.state.uiShow?'block':'none'}}>
                                <li role="separator" className="menu-li"><NavLink to="/admin/myclass/">已上课程</NavLink></li>
                                <li role="separator" className="menu-li"><NavLink to="/admin/myOrder/">我的订单</NavLink></li>
                                <li role="separator" className="menu-li"><NavLink to="/admin/mine/">个人设置</NavLink></li>
                                <li role="separator" className="menu-li" style={{cursor:"pointer"}} onClick={this.logout} ><a>退出登录</a></li>
                              </ul>
                          </li>
                          <li className="btn-change-color">
                                  <Link to='/admin/goodsList/'>
                                      <button type="button" className="title-buy title-text">立即购买</button>
                                  </Link>
                            </li>
                      </ul>
                    {/* <ul className="nav navbar-nav navbar-right">
                          <li className="dropdown">
                            <a className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" onClick={(e)=>{
                              e.stopPropagation();
                                this.setState({
                                  bellShow:!this.state.bellShow
                                })
                            }}> 
                            <img className="img-circle" src="https://fakeimg.pl/30x30/" alt=''/></a>
                              <ul className="dropdown-menu bell-menu" style={{display:this.state.bellShow?'block':'none'}}>
                                <li role="separator" onClick={()=>{this.bellNone()}}>
                                    <img className="img-circle" src="https://fakeimg.pl/20x30/" alt=''/>
                                    <span>tony</span>
                                    <p>老师反馈了tony的学习情况</p>
                                </li>
                                <li role="separator" onClick={()=>{this.bellNone()}}>
                                    <img className="img-circle" src="https://fakeimg.pl/20x30/" alt=''/>
                                    <span>tony</span>
                                    <p>老师反馈了tony的学习情况</p>
                                </li>
                                <li role="separator" onClick={()=>{this.bellNone()}}>
                                    <img className="img-circle" src="https://fakeimg.pl/20x30/" alt=''/>
                                    <span>tony</span>
                                    <p>老师反馈了tony的学习情况</p>
                                </li>
                                
                              </ul>
                          </li>
                      </ul> */}
                  <div className="collapse navbar-collapse"  style={{display:this.state.headShow?'block':'none'}}>
                      <ul className="nav navbar-nav bottom-nav" style={{float:"right"}}>
                          {tabs.map(item => (
                              <li key={item.id} role="presentation" className="title-text" style={{marginRight:"50px"}}>
                                  <NavLink to={item.id} activeClassName="activeName" onClick={()=>{
                                    this.setState({
                                      headShow:!this.state.headShow
                                    })
                                  }}>{item.name}</NavLink>
                              </li>
                            ))}
                      </ul>
                </div>
            </div>
        </nav>
        <Switch>
            {/* 我的课程路由 */}
            <Route path="/admin/myclass" component={MyClass}/>
            {/* 我的订单路由 */}
            <Route path="/admin/MyOrder" component={MyOrder}/>
            {/* 课前预习--游戏路由*/}
            <Route path="/admin/game" component={Game}/>
            {/* 课前预习--游戏路由*/}
            <Route path="/admin/NotAtThe" component={Game}/>
            {/* 课后复习路由*/}
            <Route path="/admin/review" component={Review}/>
            {/*教学内容路由*/}
            <Route path="/admin/teachingcontent" component={TeachingContent}/>
            {/*分析报告路由*/}
            <Route path="/admin/analysis" component={Analysis}/>
              {/*我的协议路由*/}
            <Route path="/admin/agreement" component={Agreement}/>


            <Route path="/admin/adminIndex" component={AdminMain}/>
            {/* <Route path="/admin/adminUser" component={AdminUser}/> */}
            <Route path="/admin/adminJudge" component={AdminJudge}/>
            <Route path="/admin/adminMain" component={AdminIndex}/> 
            <Route path="/admin/goodsList" component={GoodsList}/>
            <Route path="/admin/goodsDetail" component={GoodsDetail}/>
            <Route path="/admin/mine" component={Mine}/>
            <Route path="/admin/download" component={Download}/>
            <Redirect to="/admin/adminIndex/" />
        </Switch>
      </div>
       
    );
  }
}
export default UserHome;
